<template>
    <div>
        <div class="head">
            <div class="headbox flex-container">
                <div class="logo-box">
                    <div>Vue-Layout</div>
                </div>
                <div>
                    <div class="flex-container">
                        <div class="flex-item" @click="goBack"><i class="iconfont icon-baocun"/>返回</div>
                        <div class="flex-item" @click="goBack"><i class="iconfont icon-plus-preview"/>重新编辑</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="body" :style="{background: globalSet.background}">
            <div v-for="(element,index) in fatherList" :key="index">
                <el-row
                    :gutter="element.gutter"
                    :style="{
                        height: element.heightAuto ? 'auto' : element.height+'px',width: element.width+'%',
                        background: element.background,
                        marginLeft: element.marginLeft+'px',
                        marginRight: element.marginRight+'px',
                        marginTop: element.marginTop+'px',
                        marginBottom: element.marginBottom+'px',
                        paddingLeft: element.paddingLeft+'px',
                        paddingRight: element.paddingRight+'px',
                        paddingTop: element.paddingTop+'px',
                        paddingBottom: element.paddingBottom+'px'
                    }"
                    v-if="element.type!='RowTab'">
                    <el-col :span="element.span[columnIndex]" v-for="(column, key, columnIndex) in element.childList" :key="key">
                        <el-form :label-position="globalSet.labelPosition" :label-width="globalSet.labelWidth+'px'">
                            <div v-for="(child, chiildIndex) in column" :key="chiildIndex">
                                <div>
                                    <component :is="child.type" :obj="child"/>
                                </div>
                            </div>
                        </el-form>
                    </el-col>
                </el-row>
                <el-row
                    :gutter="element.gutter"
                    :style="{
                        height: element.heightAuto ? 'auto' : element.height+'px',width: element.width+'%',
                        background: element.background,
                        marginLeft: element.marginLeft+'px',
                        marginRight: element.marginRight+'px',
                        marginTop: element.marginTop+'px',
                        marginBottom: element.marginBottom+'px',
                        paddingLeft: element.paddingLeft+'px',
                        paddingRight: element.paddingRight+'px',
                        paddingTop: element.paddingTop+'px',
                        paddingBottom: element.paddingBottom+'px'
                    }"
                    v-else>
                    <el-tabs :tab-position="element.tabPosition" v-model="element.curTab" type="card">
                        <el-tab-pane v-for="(column, key, columnIndex) in element.childList" :label="(element.tabList[columnIndex]).label" :name="(element.tabList[columnIndex]).value" :key="key">
                            <el-form :label-position="globalSet.labelPosition" :label-width="globalSet.labelWidth+'px'">
                                <div v-for="(child, childIndex) in column" :key="childIndex">
                                    <component :is="child.type" :obj="child"/>
                                </div>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
import { WOW } from 'wowjs'
import Template from '@/components/template'
import { mapGetters } from 'vuex'
export default {
    components: {
        ...Template
    },
    data() {
        return {
            fatherList: localStorage.getItem('templateList') ? JSON.parse(localStorage.getItem('templateList')) : [],
            globalSet: localStorage.getItem('globalSet') ? JSON.parse(localStorage.getItem('globalSet')) : {}
        }
    },
    computed: {
        ...mapGetters([
            'templateList'
        ])
    },
    mounted() {
        console.log(this.fatherList)
        console.log(this.globalSet)
        this.$nextTick(() => { // 在dom渲染完后,再执行动画
            var wow = new WOW({
                live: false
            })
            wow.init()
        })
    },
    methods: {
        goBack() {
            this.$router.push({ path: '/layout' })
        }

    }
}
</script>

<style lang="scss">

</style>

